<!DOCTYPE html> 
<html>
<head>
	<title>Grid in Container Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<link rel='stylesheet' href="support/common.css" />
	<style type="text/css">
		#container {
			height: 1000px;
			border: 1px solid black;
			margin: 40px;
		}

		#topPane, #bottomPane {
			height: 300px;
		}

		#leftPane, #rightPane {
			width: 300px;
		}
	</style>

	<script type="text/javascript" src="../../dojo/dojo.js" 
		data-dojo-config="async: true, isDebug: true, parseOnLoad: true,  packages:[{name: 'gridx', location:'../gridx'}]"></script>
	<script type="text/javascript" src='support/common.js'></script>
	<script type="text/javascript" src='test_grid_container.js'></script>
</head>
<body class='claro'>
	<h1 class='title'>Grid in Dijit Containers</h1>
	<div id="container" jsid="container" data-dojo-type="dijit.layout.BorderContainer">
		<div id='centerPane' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'"></div>
		<div id='leftPane' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">
			<div id='accPane' data-dojo-type="dijit.layout.AccordionContainer"></div>
		</div>
		<div id='rightPane' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'right', splitter: true"></div>
		<div id='topPane' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">
			<div id='tabPane' data-dojo-type="dijit.layout.TabContainer"></div>
		</div>
		<div id='bottomPane' data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: true">
		</div>
	</div>
</body>
</html>
